<script setup>
    import { reactive,ref } from 'vue';
    import BlogTop from '../components/BlogTop.vue';
    import BlogBottom from '../components/BlogBottom.vue';
    import UserCenter from '../components/UserComponents/UserCenterCom.vue';
    import AccountNum from '../components/UserComponents/AccountNumCom.vue';
    import DraftBox from '..//components/UserComponents/DraftBoxCom.vue';

    const activeName = ref('first')

</script>

<template>
    <!-- 导航栏 -->
  <BlogTop></BlogTop>
 <div class="user">
    <div class="content">
        <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            tab-position="left"
        >
            <div class="item">
            <el-tab-pane label="个人中心" name="first"><UserCenter /></el-tab-pane>
            <el-tab-pane label="账号" name="second"><AccountNum /></el-tab-pane>
            <el-tab-pane label="草稿箱" name="third"><DraftBox /></el-tab-pane>
            </div>
        </el-tabs>
        </div>
    </div>
  <!-- 版权 -->
  <BlogBottom></BlogBottom>
</template>

<style lang="less" scoped>
    .user{
        display: flex;
        justify-content: center;
        margin-bottom: 160px;
        .content{
            padding: 10px;
            margin-top: 90px;
            width: 60%;
            height: 500px;
            border-radius: 5px;
      
            .item {
                margin: 0 20px;
                border-radius: 5px;
                background-color: #fff;
                
            }
        }
    }
</style>